<template>
  <div class="student">
    <h2>学生名称：{{ name }}</h2>
    <h2>学生性别：{{ sex }}</h2>
    <button @click="sendStudentName">把学生名给App</button>
    <button @click="unbind">解绑事件</button>
  </div>
</template>

<script>

export default {
  name: "Student",
  data() {
    return {
      name: '张三',
      sex: '男'
    }
  },
  methods: {
    sendStudentName() {
      // 触发student实例身上的事件
      this.$emit('sendNameToApp', this.name);
    },
    unbind() {
      // 解绑一个自定义事件
      this.$off('sendNameToApp');
      // 解绑多个自定义事件
      this.$off(['sendNameToApp', 'demo']);
      // 解绑所有自定义事件
      this.$off();
    }
  }
}
</script>

<style scoped>
.student {
  padding: 10px;
  background-color: #d880fe;
}
</style>